<template>
	<div class="app-container">
		<el-card class="box-card">
			<h3>创建券</h3>
			<el-form ref="quan" :rules="rules" :model="quan" label-width="150px">
				<el-form-item label="券类型" prop="pid">
					<el-select v-model="quan.pid" placeholder="请选择券类型" @visible-change="queryByType">
						<el-option v-for="item in type" :key="item.id" :label="item.name" :value="item.pid"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="券名称" prop="name">
					<el-select v-model="quan.name" filterable allow-create default-first-option placeholder="请选择券名称" @change="SelectItem">
						<el-option v-for="item in quanName" :key="item.id" :label="item.name" :value="item.name"></el-option>
					</el-select>
				</el-form-item>

				<!-- 	<el-form-item label="券价格" prop="price">
					<el-input v-model.number="quan.price" />
				</el-form-item> -->
				<el-form-item label="券价格" prop="price" >
					<!-- prop="price"    .number-->
					<!-- <el-select v-mode="quan.price" filterable allow-create default-first-option placeholder="请选择输入券价格" >
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select> -->
					<el-select v-model.number="quan.price" filterable allow-create default-first-option placeholder="请选择输入券价格"  @change="SelectPrice">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="券链接">
					<!-- prop="url" -->
					<el-input v-model="quan.url" />
				</el-form-item>
			</el-form>
		</el-card>

		<div class="op-container">
			<el-button @click="Cancel">取消 / 清空</el-button>
			<el-button type="primary" @click="Publish('quan')">创建该券</el-button>
		</div>

	</div>
</template>

<style scoped>
</style>

<script>
	import {
		createType,
		queryByType,
		createQuan,
		selectQuan,
		selectAllQuan
	} from '../../../api/index';
	export default {
		name: 'createType',

		data() {
			return {

				value: [],
				options: [
					{
						value: 20,
						label: 20
					},

					{
						value: 40,
						label: 40
					}, {
						value: 60,
						label: 60
					},
					{
						value: 80,
						label: 80
					},
					
					{
						value: 100,
						label: 100
					}

				],
				//券字典
				type: null,
				// 下拉券名
				quanName: [],
				id: '-2',
				//创建券信息
				quan: {
					deleted: '0',
					desc: '',
					name: '', //券名字
					pid: '', //券类型
					price: '', //券价格
					url: '' //券链接
				},

				rules: {
					pid: [{
						required: true,
						message: '券类型不能为空',
						trigger: 'blur'
					}],
					name: [{
						required: true,
						message: '券名称不能为空',
						trigger: 'blur'
					}],
					price: [{
						required: true,
						message: '券价格不能为空',
						trigger: 'blur'
					}, {
						type: 'number',
						message: '类型必须为数字值',
						trigger: 'blur'
					}],
					url: [{
						required: true,
						message: '券链接不能为空',
						trigger: 'blur'
					}]
				}
			};
		},
		computed: {
			headers() {
				return {};
			}
		},
		created() {
			this.queryByType();
			this.selectAllQuan()
		},

		methods: {
			// 选择价格
			SelectPrice(e){
				console.log(e)
			},
			// 选择名称
			SelectItem(e) {
				console.log(e)
				console.log(this.quan.name)

			},
			//所有券
			selectAllQuan() {
				// console.log('所有券')
				selectAllQuan()
					.then(res => {
						console.log('所有券', res.data.quanList)
					})
					.catch(err => {
						console.log(err);
					});
			},
			//获取券列表
			selectQuan(postObj) {
				// console.log(this.quanName)
				selectQuan(postObj)
					.then(res => {
						console.log("单个列表", res.data.quanList);
						this.quanName.length = 0
						this.quan.name = ''
						this.quan.price = ''
						res.data.quanList.forEach((items, i) => {
							this.quanName.push(items)
						})
					})
					.catch(err => {
						console.log(err);
					});
			},

			//获取券字典
			queryByType() {
				queryByType()
					.then(res => {
						console.log('获取券字典', res);
						this.type = res;
						console.log('当前券', this.quan)
						var postObj = {
							pid: this.quan.pid
						}
						this.selectQuan(postObj)
					})
					.catch(err => {
						console.log(err);
					});
			},

			// // 取消创建
			Cancel: function() {
				this.quan.name = '';
				this.quan.pid = '';
				this.quan.price = '';
				this.quan.url = '';
			},
			//   创建该券
			Publish: function(formName) {
				var quan = this.quan;
				this.$refs[formName].validate((valid) => {
					if (valid) {

						if (!!this.quan.url) {
							// 如果有url   不做改变
							console.log('如果有url', quan)
							createQuan(quan)
								.then(res => {
									console.log(quan)
									console.log(res);
									if (!!res.errno && res.errno != 200) {
										this.$notify.error({
											title: '失败',
											message: res.errmsg + '或检查数据是否为空'
										});
										this.Cancel()
									} else {
										// 创建成功
										console.log(res);
										this.Cancel()
										this.$notify.success({
											title: '成功',
											message: '创建成功'
										});
									}
								})
								.catch(err => {
									console.log(err);
								});
						} else {
							//如果没有url   删除属性
							this.$delete(quan, 'url')
							console.log('如果没有url', quan)
							createQuan(quan)
								.then(res => {
									console.log(quan)
									console.log(res);
									if (!!res.errno && res.errno != 200) {
										this.$notify.error({
											title: '失败',
											message: res.errmsg + '或检查数据是否为空'
										});
										this.Cancel()
									} else {
										// 创建成功
										console.log(res);
										this.Cancel()
										this.$notify.success({
											title: '成功',
											message: '创建成功'
										});
									}
								})
								.catch(err => {
									console.log(err);
								});
						}

					} else {
						console.log('error submit!!');
						return false;
					}
				});

			},


		}
	};
</script>
